<template>
	<view class="live-card">
		<!-- 1 -->
		<view class="avatar-wrapper">
			<image :src="userAvatar" alt="用户名" class="avatar" />
		</view>
		<text class="username">{{ username }}</text>
		<!-- 2 -->
		<view class="status">
			<text class="status-title">直播结束</text>
			<text class="duration">
				<text class="duration-value">直播时长: {{ liveTimeStr }}</text>
			</text>
		</view>
		<!-- 3 -->
		<view class="stats">
			<text class="stat-label">喜欢</text>
			<text class="stat-label">观看人数</text>
			<text class="stat-label">分享</text>
			<text class="stat-value">{{ likeCount }}</text>
			<text class="stat-value">{{ userCount }}</text>
			<text class="stat-value">{{ Math.floor(Math.random() * 5) + 1 }}</text>
		</view>
		<!-- 4 -->
		<button class="start-live-btn" @click="endlive">
			<text class="icon">确定</text>
		</button>
	</view>
</template>
<script>
export default {
	onLoad(options) {
		console.log(options, 'options');
		this.likeCount = options.likeCount;
		this.userCount = options.userCount;
		this.liveTimeStr = options.liveTimeStr || '00:00:00';
		this.userAvatar = options.userAvatar || '';
		this.username = options.username || '';
	},
	methods: {
		endlive() {
			uni.redirectTo({ url: '/pages/start/start' });
		}
	}
};
</script>
<style scoped>
.start-live-btn {
	width: 274px;
	height: 48px;
	border-radius: 999px;
	background: linear-gradient(101.01deg, #fe511f 5.29%, #fd8139 97.57%);
	color: #fff;
	border-radius: 999px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	/* line-height: 48px; */
	border: none;
	font-size: 16px;
	/* cursor: pointer;  */
	margin: 35px 0px;
	transition: all 0.3s ease;
}

.start-live-btn:active {
	transform: scale(0.98);
	background: linear-gradient(101.01deg, #e04a1c 5.29%, #e6732f 97.57%);
}

.stats {
	width: 80%;
	/* border: 1px solid red; */
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 60px;
	/* 行间距 */
	row-gap: 20px;
	/* 元素之间的间距 */
}

.stats text {
	flex: 0 0 calc((100% - 20px) / 3);
	/* 每个元素占据宽度的三分之一，减去间距 */
	box-sizing: border-box;
	text-align: center;
	/* 文本居中 */
	font-family: Source Han Sans CN;
	font-weight: 350;
	font-size: 18px;
	line-height: 100%;
	letter-spacing: 0%;
	text-align: center;
	vertical-align: middle;
	color: #ffffff;
}

.live-card {
	/* padding-top: 100px; */
	/* width: 256px; */
	background-color: #323232;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* height: calc(100vh - 44px); */
	/* padding-top: 60px; */
	height: 100%;
	height: 100vh;
}

.avatar-wrapper {
	margin-top: 50px;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 3px solid #ffffff;
	overflow: hidden;
}

.avatar {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.username {
	font-family: Source Han Sans CN;
	font-weight: 400;
	font-size: 20px;
	line-height: 100%;
	letter-spacing: 0%;
	color: #ffffff;
	width: 40px;
	height: 30px;
	display: inline-block;
	margin-top: 10px;
}

.status {
	margin-top: 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.status-title {
	font-family: Source Han Sans CN;
	font-weight: 500;
	font-size: 28px;
	line-height: 100%;
	letter-spacing: 0%;
	text-align: center;
	color: #ffffff;
	margin-bottom: 12px;
}

.duration {
	/* width: 177px; */
	height: 30px;
	font-family: Source Han Sans CN;
	font-weight: 350;
	font-size: 20px;
	line-height: 100%;
	letter-spacing: 0%;
	text-align: center;
	margin-top: 12px;
}

.duration-value {
	color: #a0a0a0;
}
</style>
